<script lang="ts" setup>
import { routesHistory, type RoutesHistoryItem } from '@/utils/routesHistory'
import { tabBars } from '@/router'

const { historyItem } = defineProps<{
  historyItem: RoutesHistoryItem
}>()

// 是否tabBar页
const isTabBarPage = tabBars.some((to) => to.path === historyItem.__id)
const toConfigPage = () => {}
</script>

<template>
  <div class="PageProxy">
    <van-nav-bar
      :title="historyItem.meta.title"
      :left-arrow="!isTabBarPage && routesHistory.length > 1"
      :left-text="!isTabBarPage && routesHistory.length > 1 ? '返回' : ''"
      @click-left="$router.back"
      v-if="$route.meta.isShowTopBar !== false"
    >
      <template #right v-if="$route.meta.navConfig?.navIcon">
        <van-icon
          :name="$route.meta.navConfig?.navIcon"
          size="18"
          @click="$route.meta.navConfig?.navPath && $router.push($route.meta.navConfig.navPath)"
        />
      </template>
    </van-nav-bar>
    <div class="scroll">
      <slot />
    </div>
    <van-tabbar route :fixed="false" v-if="isTabBarPage">
      <van-tabbar-item
        replace
        v-for="item in tabBars"
        :key="item.path"
        :to="item.path"
        :icon="item.meta!.icon"
        >{{ item.meta!.tabTitle }}</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<style lang="scss" scoped>
.PageProxy {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  > * {
    flex-shrink: 0;
  }

  > .scroll {
    flex: 1;
    background-color: var(--page-bg);
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    height: 100%;
    position: relative;
  }
}
</style>
